<html style="overflow-y: auto;">
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    
	<link type="text/css" href="jquery.ui.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.ui.core.min.js"></script>    
    <script type="text/javascript" src="jquery.ui.widget.min.js"></script>    
    <script type="text/javascript" src="jquery.ui.tabs.min.js"></script>    
            
    <link type="text/css" rel="stylesheet" href="JQuerySpinBtn.css" />
    <script type="text/javascript" src="JQuerySpinBtn.js"></script>    
    
	<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	
	$(document).ready(function() {
		//top.resizeTo($(window).width(), $(document).height() + (top.outerHeight - $(window).height()));
	});
	</script>

  </head>
  <body style="overflow-y: auto;">
    <script type="text/javascript"> 
    		
		function setControl(dest, plugin, id, group, value) {
          $.get('/?action=command&dest=' +		dest +
          						'&plugin=' +	plugin+
          						'&id='+ 		id + 
          						'&group='+ 		group + 
          						'&value=' +		value );
        }

        function setControl_bool(dest, plugin, id, group, value) {
          if (value == false)
            setControl(dest, plugin, id, group, 0);
          else
            setControl(dest, plugin, id, group, 1);
        }

        function setControl_string(dest, plugin, id, group, value) {
          if (value.length < minlength) {
            alert("The input string has to be least"+minlength+" characters!");
            return;
          }
          $.get('/?action=command&dest=' +		dest +
          						'&plugin=' +	plugin+
          						'&id='+ 		id + 
          						'&group='+ 		group + 
          						'&value=' +		value , 
			function(data){
             alert("Data Loaded: " + data);
           });
        }
                        
        function setResolution(plugin, controlId, group, value) {
	        $.get('/?action=command&dest=0'	+		// resolution command always goes to the input plugin
					'&plugin=' +	plugin+
					'&id'+ 			controlId + 
					'&group=1'	+					// IN_CMD_RESOLUTION == 1,		
					'&value=' +		value, 
				function(data){
				     if (data == 0) {
				     	$("#statustd").text("Success");
				     } else {
				     	$("#statustd").text("Error: " + data);
				     }
		        }
	        );
        }
                
        function addControl(plugin_id, suffix) {
        var dest = suffix=="in"?0:1;
        $.getJSON(suffix+"put_"+plugin_id+".json",
          function(data) {
            $.each(data.controls, function(i,item){
              $('<tr/>').attr("id", "tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id).appendTo("#controltable_"+suffix+"-"+plugin_id);
              // BUTTON type controls does not have a label 
              if (item.type == 4) {
                $("<td/>").appendTo("#tr-"+item.id);
              } else {
                if (item.type == 6) { // Class type controls
                  $("<td/>").text(item.name).attr("style", "font-weight:bold;").appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
                  return;
                } else {
                  $("<td/>").text(item.name).appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
                }
              }

              $("<td/>").attr("id", "td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id)
              	.appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
              if((item.type == 1) || (item.type == 5)) { // integer type controls
                if ((item.id == 10094852) && (item.group == 1) && (item.dest == 0)) { //V4L2_CID_PAN_RELATIVE
				  $("<button/>")
                  .attr("type", "button")
                  .attr("style", "width: 50%; height: 100%;")
                  .text("<")
                  .click(function(){setControl(dest, plugin_id, item.id, item.group, 200);})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                  $("<button/>")
                  .attr("type", "button")
                  .attr("style", "width: 50%; height: 100%;")
                  .text(">")
                  .click(function(){setControl(dest, plugin_id, item.id, item.group, -200);})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                } else if ((item.id == 10094853) && 
                		   (item.group == 1) && 
                		   (item.dest == 0)){ // V4L2_CID_TILT_RELATIVE
        		   $("<button/>")
                  .attr("type", "button")
                  .attr("style", "width: 50%; height: 100%;")
                  .text("^")
                  .click(function(){setControl(dest, plugin_id, item.id, item.group, -200);})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                  $("<button/>")
                  .attr("type", "button")
                  .attr("style", "width: 50%; height: 100%;")
                  .text("ˇ")
                  .click(function(){setControl(dest, plugin_id, item.id, item.group, 200);})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                } else { // another non spec control
                    var options = {min: item.min, max: item.max, step: item.step,}
		            $("<input/>")
		              .attr("value", item.value)
		              .attr("id", "spinbox-"+item.id)
		              .SpinButton(options)
		              .bind("valueChanged", function() {setControl(dest, plugin_id, item.id, item.group, $(this).val());})
		              .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                } 
              } else if (item.type == 2) { // boolean type controls
                if (item.value == "1")
                  $("<input/>")
                    .attr("type", "checkbox")
                    .attr("checked", "checked")
                    .change(function(){setControl_bool(dest, plugin_id, item.id, item.group, ($(this).attr("checked")?1:0));})
		            .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                else
                  $("<input/>")
                    .attr("type", "checkbox")
                    .change(function(){setControl_bool(dest, plugin_id, item.id, item.group, ($(this).attr("checked")?1:0));})
                    .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
              } else if (item.type == 7) { // string type controls
                  $("<input/>").attr("value", item.value).appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
              } else if (item.type == 3) { // menu
                $("<select/>")
                  .attr("name", "select-"+item.id)
                  .attr("id", "menu-"+item.id)
                  .attr("style", "width: 100%;")
                  .change(function(){setControl(dest, plugin_id, item.id, item.group, $(this).val());})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
                $.each(item.menu, function(val, text) {
                    if (item.value == val) {
                      $("#menu-"+item.id).append($('<option></option>').attr("selected", "selected").val(val).html(text));
                    } else {
                      $("#menu-"+item.id).append($('<option></option>').val(val).html(text));
                    }
                });
              } else if (item.type == 4) { // button type
                $("<button/>")
                  .attr("type", "button")
                  .attr("style", "width: 100%; height: 100%;")
                  .text(item.name)
                  .click(function(){setControl(dest, plugin_id, item.id, item.group, 0);})
                  .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
              } else if (item.type == 7) { // string  type
                $("<input/>")
                    .attr("type", "text")
                    .attr("maxlength", item.max)
                    .change(function(){setControl_string(dest, plugin_id, item.id, item.group, $(this).text());})
                    .appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
              } else {
                 alert("Unknown control type: "+item.type);
              }
            });
          }
        );
        }

	    $.getJSON("program.json", 
	    	function(data) {
	    		$.each(data.inputs, 
	    			function(i,input){
		        		$("<li/>").attr("id", "li_in-"+input.id).appendTo("#ul_tabs");
						$("<a/>").attr("href", "#controldiv_in-"+input.id)
							.text(input.name).appendTo("#li_in-"+input.id);
						$("<div/>").attr("id", "controldiv_in-"+input.id).appendTo("#tabs");
						$("<table/>").attr("id", "controltable_in-"+input.id).appendTo("#controldiv_in-"+input.id);
		    		}
	    		)
	    		
	    		$.each(data.outputs, 
	    			function(i,output){
		        		$("<li/>").attr("id", "li_out-"+output.id).appendTo("#ul_tabs");
						$("<a/>").attr("href", "#controldiv_out-"+output.id)
							.text(output.name).appendTo("#li_out-"+output.id);
						$("<div/>").attr("id", "controldiv_out-"+output.id).appendTo("#tabs");
						$("<table/>").attr("id", "controltable_out-"+output.id).appendTo("#controldiv_out-"+output.id);
		    		}
	    		)
	    	
	    		$.each(data.inputs, 
	    			function(i,input){
	    				addControl(input.id, "in");
		    		}
	    		)
	    		
	    		$.each(data.outputs, 
	    			function(i,output){
	    				addControl(output.id, "out");
		    		}
	    		)
	    		
	    		$( "#tabs" ).tabs();
	    	}
	    );

       $(function() {
			
		});
        /*$.getJSON("input.json",
          function(data) {
          	$.each(data.formats, function(i,item){
          	  if (item.current == "true") {
          	  $("<select/>")
                  .attr("id", "select-resolution")
                  .attr("style", "width: 100%;")
                  .change(function(){setResolution($(this).val());})
                  .appendTo("#resolutions");
           	    $.each(item.resolutions, function(val,res){
           	    	if (item.currentResolution == val) {
                      $("#select-resolution").append($('<option></option>').attr("selected", "selected").val(val).html(res));
                    } else {
                      $("#select-resolution").append($('<option></option>').val(val).html(res));
                    }
           	    });
          	  }
          	});
          });*/
    </script>
    
    <div id="tabs">
		<ul id="ul_tabs"></ul>
  	</div>

  </body>
</html>
